<template>
  <el-table
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :type="column.type"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="200"
        v-if="operate"
    >
      <template #default="scope">
        <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <div style="margin-top: 20px">
    <el-pagination
        background
        layout="sizes, prev, pager, next, total"
        :page-sizes="[10,50,100]"
        :current-page="currentPage"
        @size-change="handlePageSize"
        @current-change="handleCurrentChange"
        :total="total">
    </el-pagination>
  </div>
</template>

<script setup>

import {defineProps, ref, defineEmits} from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  operate:{
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['pageChange', 'pageSizeChange', 'edit', 'view', 'delete']);

function handleCurrentChange(page) {
  emit("pageChange", page);
}

function handlePageSize(pageSize) {
  console.log("page size :" + pageSize);
  emit("pageSizeChange", pageSize);
}

function handleEdit(row) {
  console.log("row id :" + row.id);
  emit("edit", row.id);
}

function handleView(row) {
  console.log("row id :" + row.id);
  emit("view", row.id);
}

function handleDelete(row) {
  console.log("row id :" + row.id);
  emit("delete", row.id);
}


</script>

<style scoped>

</style>